React パフォーマンス向上 Tips

Tips

hr.icon

重い再レンダリングDOMを見つけて是正する

devtoolを使って、アプリ内の再レンダリングコストが大きいDOMを特定し、そのコストを下げるようにする。

レンダリングが重くなる原因としては、子コンポーネントが多かったり、子コンポーネントのレンダリングに時間がかかったり、関数実行の処理が重かったりなど様々。

是正ポイント

重い子コンポーネントの再レンダリングを防ぐ。

大きすぎるコンポーネントは分割する。

react-windowなどを使って、省エネマウントを実現する。

参考

重要.icon ただし、最初からいきなりメモ化はしなくていいと思う。再レンダリングが重いことが問題と認知された時にメモ化やその他高速化を検討すればいい。

メモ化にもコストがかかる。

ある人によると、大抵のメモ化は必要ないのだとか、そんな効力を得られることはないってよ。

だから、血眼になってメモ化する必要はないんだと。